<template>
    <div>
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="分析报告" name="first">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
          <!-- <el-form-item>
              <el-button type="primary" @click="onSubmit">报告查看</el-button>
            </el-form-item> -->
            <el-form-item>
              <el-button type="success" @click="handleExport">分析结果导出</el-button>
            </el-form-item>
          </el-form>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true">
            <el-form-item label="数据库名字" prop="databaseName">
              <el-input
                v-model="queryParams.data.databaseName"
                placeholder="数据库名字"
                clearable
              />
            </el-form-item>

            <el-form-item label="系统名称" prop="operation">
              <el-input
                v-model="queryParams.data.operation"
                placeholder="系统名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="报告描述" prop="describe">
              <el-input
                v-model="queryParams.data.describe"
                placeholder="报告描述"
                clearable
              />

            </el-form-item>
            <el-form-item label="时间" prop="diagnosisTime">
              <el-date-picker
                v-model="queryParams.data.diagnosisTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table
                border
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                width="100px"
                prop="databaseName"
                label="数据库名称">
            </el-table-column>


            <el-table-column
                prop="describe"
                label="报告描述">
            </el-table-column>
            <el-table-column
                prop="diagnosisTime"
                label="诊断时间">
            </el-table-column>

             <el-table-column
                prop="operator"
                width="100px"
                label="操作人">
            </el-table-column>

<!--            <el-table-column
              header-align="center"
              label="操作"
              width="300px"
              align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="getSystemByDBId(scope.row)">报告查看</el-button>
                <el-button type="primary" @click="handleExport(scope.row)">分析结果导出</el-button>
              </template>
            </el-table-column>-->
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="脚本应用" name="second">
          <Analy :type = "7"></Analy>
        </el-tab-pane>
      </el-tabs>

        <el-dialog
          title="报告详情"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="数据库">
              <el-input v-model="form.databaseName"></el-input>
            </el-form-item>
            <el-form-item label="运维对象">
              <el-input v-model="form.operation"></el-input>
            </el-form-item>
            <el-form-item label="报告描述">
              <el-input type="textarea" v-model="form.describe"></el-input>
            </el-form-item>
            </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>




        


        

    </div>
</template>

<script>  window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
import {queryDatabaseReportList} from "@/api/diagmanage/databasereport"
import Analy from '@/views/diagmanage/diagmanagescript'
export default {
  components:{Analy},
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleQuery(){
        this.getList();
      },
      handleSizeChange(val){
        this.queryParams.pageSize = val
        this.getList()
      },
      handleCurrentChange(val){
        this.queryParams.pageNumber = val
        this.getList()
      },

      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
        getList(){

          queryDatabaseReportList(this.queryParams).then(res=>{
              this.tableData=res.data.data
              this.total = res.data.total
          })
        },
        onSubmit(){

        },
        search(row){
          this.dialogVisible=true
          queryDatabaseReportList(row).then(res=>{
                  this.form=res.data[0]
                // console.log(res.data)

              })


        },
        handleClose(done){
             this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
         handleExport() {
          this.download('StateDatabaseController/export', {
            ...this.queryParams
          }, `数据库深度分析-${new Date().getTime()}.xlsx`)
        }


    },
    data() {
      return {
        activeName: 'first',
        queryParams:{
          data:{
            databaseName:"",
            operation:"",
            describe:"",
            diagnosisTime:"",
            operator:"",
          },
          pageSize:10,
          pageNumber:1,
        },
        form:{},
        tableData: [],
        formInline:{

        },
        dialogVisible:false,
        currentPage:1,
        pageSize:10,
        total:0
      }
    },
    created(){
        this.getList()
    }






}
</script>

<style scoped>

.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .demo-form-inline{
    margin-left: 30px;
    margin-top: 20px;
  }
</style>
